<template>
  <div class="add-vehicle-page">
    <!-- 内容区域 -->
    <div class="content-wrapper">
      <!-- 车辆插图 -->
      <div class="car-illustration">
        <img 
          src="@/static/mycar-img/组 4.png" 
          alt="车辆插图" 
          class="car-img"
        >
      </div>

      <!-- 表单区域 -->
      <div class="form-section">
        <!-- 车辆类型 -->
        <div class="form-item">
          <div class="form-label">车辆类型</div>
          <div class="form-input" @click="handleSelectVehicleType">
            <span :class="formData.vehicleType ? 'selected-value' : 'placeholder'">
              {{ formData.vehicleType || '请选择' }}
            </span>
            <span class="arrow">></span>
          </div>
        </div>

        <!-- 车辆型号 -->
        <div class="form-item">
          <div class="form-label">车辆型号</div>
          <div class="form-input" @click="handleSelectVehicleModel">
            <span :class="formData.vehicleModel ? 'selected-value' : 'placeholder'">
              {{ formData.vehicleModel || '请选择' }}
            </span>
            <span class="arrow">></span>
          </div>
        </div>

        <!-- 车牌号码 -->
        <div class="form-item">
          <div class="form-label">车牌号码</div>
          <div class="form-input">
            <input 
              type="text" 
              placeholder="请输入您的车牌号"
              v-model="formData.plateNumber"
              class="input-field"
            >
          </div>
        </div>

        <!-- 车主姓名 -->
        <div class="form-item">
          <div class="form-label">车主姓名</div>
          <div class="form-input">
            <input 
              type="text" 
              placeholder="请输入您的姓名"
              v-model="formData.ownerName"
              class="input-field"
            >
          </div>
        </div>

        <!-- 电话号码 -->
        <div class="form-item">
          <div class="form-label">电话号码</div>
          <div class="form-input">
            <input 
              type="tel" 
              placeholder="请输入您的手机号"
              v-model="formData.phoneNumber"
              class="input-field"
            >
          </div>
        </div>

        <!-- 照片上传 -->
        <div class="form-item">
          <div class="form-label">照片</div>
          <div class="upload-area" @click="handleUploadPhoto">
            <div class="upload-content">
              <span class="upload-icon">+</span>
              <span class="upload-text">上传车辆照片</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-action">
      <button class="add-vehicle-btn" @click="handleSubmit">
        <span class="plus-icon">+</span>
        <span class="btn-text">添加车辆</span>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AddVehiclePage',
  data() {
    return {
      formData: {
        vehicleType: '',
        vehicleModel: '',
        plateNumber: '',
        ownerName: '',
        phoneNumber: '',
        photo: null
      }
    }
  },
  methods: {
    // 选择车辆类型
    handleSelectVehicleType() {
      uni.showActionSheet({
        itemList: ['轿车', 'SUV', 'MPV', '跑车', '皮卡'],
        success: (res) => {
          const types = ['轿车', 'SUV', 'MPV', '跑车', '皮卡'];
          this.formData.vehicleType = types[res.tapIndex];
        }
      });
    },

    // 选择车辆型号
    handleSelectVehicleModel() {
      uni.showActionSheet({
        itemList: ['奥迪A4L', '宝马3系', '奔驰C级', '大众帕萨特', '丰田凯美瑞'],
        success: (res) => {
          const models = ['奥迪A4L', '宝马3系', '奔驰C级', '大众帕萨特', '丰田凯美瑞'];
          this.formData.vehicleModel = models[res.tapIndex];
        }
      });
    },

    // 上传照片
    handleUploadPhoto() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.formData.photo = res.tempFilePaths[0];
          uni.showToast({
            title: '照片上传成功',
            icon: 'success'
          });
        }
      });
    },

    // 提交表单
    handleSubmit() {
      // 表单验证
      if (!this.formData.vehicleType) {
        uni.showToast({ title: '请选择车辆类型', icon: 'none' });
        return;
      }
      if (!this.formData.vehicleModel) {
        uni.showToast({ title: '请选择车辆型号', icon: 'none' });
        return;
      }
      if (!this.formData.plateNumber) {
        uni.showToast({ title: '请输入车牌号码', icon: 'none' });
        return;
      }
      if (!this.formData.ownerName) {
        uni.showToast({ title: '请输入车主姓名', icon: 'none' });
        return;
      }
      if (!this.formData.phoneNumber) {
        uni.showToast({ title: '请输入电话号码', icon: 'none' });
        return;
      }

      // 提交数据
      uni.showLoading({ title: '添加中...' });
      
      // 模拟提交
      setTimeout(() => {
        uni.hideLoading();
        
        // 跳转到成功页面
        uni.navigateTo({
          url: '/my-item/mycar/addcar_succ',
          fail: (err) => {
            console.error('跳转成功页面失败：', err);
            uni.showToast({
              title: '添加成功',
              icon: 'success',
              duration: 2000
            });
            
            // 如果跳转失败，返回上一页
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        });
      }, 1500);
    }
  },
  
  onLoad(options) {
    console.log('页面加载参数：', options);
  }
}
</script>

<style scoped>
/* 页面全局样式 */
.add-vehicle-page {
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 内容区域 */
.content-wrapper {
  flex: 1;
  padding: 40rpx;
  background-color: #ffffff;
  overflow-y: auto;
}

/* 车辆插图 */
.car-illustration {
	margin-left: -10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 60rpx;
  width: 100%;
}

.car-img {
  width: 320rpx;
  height: 224rpx;
  object-fit: contain;
  filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.08));
  display: block;
  margin: 0 auto;
}

/* 表单区域 */
.form-section {
  background-color: #ffffff;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.form-item:last-child {
  border-bottom: none;
}

.form-label {
  width: 160rpx;
  font-size: 30rpx;
  color: #007AFF;
  font-weight: 500;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40rpx;
}

.input-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 30rpx;
  color: #333333;
  background: transparent;
}

.input-field::placeholder {
  color: #999999;
}

.placeholder {
  color: #999999;
  font-size: 30rpx;
}

.selected-value {
  color: #333333;
  font-size: 30rpx;
}

.arrow {
  color: #CCCCCC;
  font-size: 28rpx;
  font-weight: bold;
}

/* 上传区域 */
.upload-area {
  flex: 1;
  border: 4rpx dashed #E5E5EA;
  border-radius: 16rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAFAFA;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-area:active {
  background-color: #F0F0F0;
  border-color: #007AFF;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.upload-icon {
  font-size: 48rpx;
  color: #CCCCCC;
  font-weight: bold;
}

.upload-text {
  font-size: 28rpx;
  color: #999999;
}

/* 底部操作区域 */
.bottom-action {
  padding: 32rpx 40rpx;
  background-color: #ffffff;
  border-top: 2rpx solid #E5E5EA;
}

/* 添加车辆按钮 */
.add-vehicle-btn {
  width: 100%;
  padding: 24rpx;
  background-color: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.25);
}

.add-vehicle-btn:active {
  background-color: #0056CC;
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

.plus-icon {
  font-size: 32rpx;
  font-weight: bold;
}

.btn-text {
  font-size: 32rpx;
  font-weight: 500;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .car-img {
    width: 280rpx;
    height: 196rpx;
  }
  
  .form-label {
    width: 140rpx;
    font-size: 28rpx;
  }
  
  .form-input {
    font-size: 28rpx;
  }
}

@media (min-width: 414px) {
  .car-img {
    width: 360rpx;
    height: 252rpx;
  }
  
  .form-label {
    width: 180rpx;
    font-size: 32rpx;
  }
  
  .form-input {
    font-size: 32rpx;
  }
}
</style>
